<template>
  <div class="commodity-classify">
    <el-button @click="dialogFormVisible=true" type="primary">添加商品分类</el-button>
    <el-dialog :modal="false" title="添加身份" :visible.sync="dialogFormVisible">
          <el-form  label-width="80px">
            <el-form-item label="姓名" label-width="30%">
              <el-input  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号" label-width="30%">
              <el-input  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="30%">
              <el-input  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份" label-width="30%">
              <el-select  placeholder="选择身份">
                <el-option label="超级管理员" value="1"></el-option>
                <el-option label="管理员" value="2"></el-option>
                <el-option label="普通用户" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
    <CategoryListContent/>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

import CategoryListContent from '@/components/goods/categoryListContent'
export default {
  data () {
    return {
      dialogFormVisible: false
    }
  },
  methods: {
    ...mapMutations('goodsCategory',[
        'setTableData'
    ])
  },
  computed: {
    ...mapGetters('goodsCategory',[
      'getTableData'
    ])
  },
  components: {
    CategoryListContent
  },
  created() {
    // this.$http.addGoodsCategory({ 
    //   pid: "0",
    //   cate_name: "棒棒糖类",
    //   pic: "",
    //   sort: this.getTableData.length,
    //   is_show: "1"
    // }).then(res => {
    //   console.log(res)
    // })
    console.log(this.getTableData.length)
  },
  mounted() {
    this.$http.getGoodsCategory().then(res => {
      this.setTableData(res.data.data)
    })
  }
}
</script>

<style>
.commodity-classify{
  width: 86%;
  padding: 0 2%;
  padding-top: 20px;
  margin: 5%;
  /* height: 50px; */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
</style>